<template>
    <NDrawer v-model:show="visible" width="800px" placement="right">
        <NDrawerContent :title="item ? '编辑通知类型' : '创建通知类型'">
            <NForm ref="formRef" :model="form" :rules="rules">
                <NFormItem label="简体" path="name">
                    <NInput v-model:value="form.name"></NInput>
                </NFormItem>
                <NFormItem label="繁体" path="nameZh">
                    <NInput v-model:value="form.nameZh"></NInput>
                </NFormItem>
                <NFormItem label="英文" path="nameEn">
                    <NInput v-model:value="form.nameEn"></NInput>
                </NFormItem>
                <NFormItem label="通知Icon" path="icon">
                    <Upload
                        @updateList="fileListUpdate"
                        :default-file-list="fileList"
                        :max="1"
                        accept=".png, .jpg, .jpeg"
                    />
                </NFormItem>
            </NForm>
            <template #footer>
                <NButton @click="submit" :loading="submitLoading" type="primary">确定</NButton>
            </template>
        </NDrawerContent>
    </NDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import { useMessage, type FormRules, type FormInst, type UploadFileInfo } from 'naive-ui'
import { createMessageType, updateMessageType } from '@/api/content'
import Upload, { type UploadFileResponse } from '@/components/Upload.vue'

defineOptions({
    name: 'DetailDrawer'
})

const props = defineProps<{
    item: Api.Content.MessageType | null
}>()
const emits = defineEmits<{
    refresh: []
}>()
const message = useMessage()

const visible = defineModel<boolean>({
    required: true
})

const formRef = ref<FormInst | null>(null)
const form = reactive<Api.Content.MessageTypeCreateParams>({
    name: '',
    nameZh: '',
    nameEn: '',
    icon: '',
    requestId: ''
})

const rules: FormRules = {
    name: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    nameZh: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    nameEn: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    icon: {
        required: true,
        message: '请上传',
        trigger: 'change'
    }
}

const fileListUpdate = (fileList: UploadFileResponse[]) => {
    if (fileList.length) {
        const { requestId, imageUrl } = fileList[0].response!
        form.icon = imageUrl
        form.requestId = requestId
    } else {
        form.icon = ''
        form.requestId = ''
    }
}

const fileList = ref<UploadFileInfo[]>([])
watchEffect(() => {
    if (props.item) {
        Object.assign(form, props.item)
        fileList.value = [
            {
                id: 'a',
                url: props.item.icon,
                name: 'image.jpg',
                status: 'finished'
            }
        ]
    }
})

const submitLoading = ref(false)
async function submit() {
    formRef.value?.validate(async errors => {
        if (errors) return
        props.item ? edit() : add()
    })
}

async function add() {
    submitLoading.value = true
    const [err, res] = await createMessageType(form)
    submitLoading.value = false
    if (!err) {
        if (res) message.success('操作成功')
        visible.value = false
        emits('refresh')
    }
}

async function edit() {
    submitLoading.value = true
    const [err, res] = await updateMessageType(props.item!.id, form)
    submitLoading.value = false
    if (!err) {
        if (res) message.success('操作成功')
        visible.value = false
        emits('refresh')
    }
}
</script>
